import 'package:flutter/material.dart';
import '../../utils/base.dart';

import 'scan_casher.dart';

class HotIconList extends StatelessWidget {
  const HotIconList({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
          // height: 300,
          child: GridView.count(
            physics: const NeverScrollableScrollPhysics(),
        //ListView嵌套GridView会报错，加此参数后可修正错误： https://segmentfault.com/q/1010000018145105/
        shrinkWrap: true,
        //每行3个
        crossAxisCount: 6,
        //水平子Widget之间间距
        crossAxisSpacing: Design.px(20),
        //垂直子Widget之间间距
        mainAxisSpacing: Design.px(20),
        // 中间间隔空白比例  https://blog.csdn.net/hao_m582/article/details/84108041
        childAspectRatio: 1,
        padding: EdgeInsets.all(Design.px(20)),

        children: [
          {
            'title': '优惠券',
            'icon': 'assets/icon-homepage-discount.png',
            'bgType': 0,
            'onPress': () => {}
          },
          {
            'title': '扫码收款',
            'icon': 'assets/icon-homepage-casher.png',
            'bgType': 1,
            'onPress': () => {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) => ScanCasher())
                }
          },
          {
            'title': '门票管理',
            'icon': 'assets/icon-homepage-ticket.png',
            'bgType': 2,
            'onPress': () => {}
          },
          {
            'title': '会员管理',
            'icon': 'assets/icon-homepage-members.png',
            'bgType': 3,
            'onPress': () => {
              Navigator.of(context).pushNamed('/user_manager/list')
            }
          },
          {
            'title': '风控中心',
            'icon': 'assets/icon-homepage-risk.png',
            'bgType': 0,
            'onPress': () => {
              Navigator.of(context).pushNamed('/risk_manager/list')
            }
          },
          {
            'title': '设备管理',
            'icon': 'assets/icon-homepage-devices.png',
            'bgType': 1,
            'onPress': () => {
              Navigator.of(context).pushNamed('/device_manager/list')
            }
          },
        ].map((item) {
          return HotIconItem(
            title: item['title'],
            icon: item['icon'],
            bgType: item['bgType'],
            onPress: item['onPress'],
          );
        }).toList(),
      )),
    );
  }
}

class HotIconItem extends StatelessWidget {
  final String title;
  final String icon;
  final int bgType;
  final VoidCallback onPress;

  const HotIconItem({Key key, this.title, this.icon, this.bgType, this.onPress})
      : super(key: key);

  TextStyle styleTitle() {
    return TextStyle(
        fontSize: Design.px(36),
        color: HexColor("FFFFFF"),
        decoration: TextDecoration.none);
  }

  LinearGradient bgColor() {
    List<List<Color>> bgTypes = [
      [HexColor('ff91a2'), HexColor('ff6972')],
      [HexColor('ffc281'), HexColor('f69765')],
      [HexColor('3fc7b5'), HexColor('36aab3')],
      [HexColor('73b5ff'), HexColor('5a94f8')],
    ];

    return LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: bgTypes[bgType % bgTypes.length],
    );
  }

  static final BorderRadius _roundRadius = BorderRadius.circular(Design.px(17));

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Container(
          height: Design.px(236),
          width: Design.px(290),
          decoration: BoxDecoration(
            borderRadius: _roundRadius,
            gradient: bgColor(),
            boxShadow: [
              new BoxShadow(
                  color: HexColor("f1f1f1"),
                  offset: new Offset(Design.px(10), Design.px(10)),
                  blurRadius: Design.px(10),
                  spreadRadius: Design.px(2))
            ],
          ),
          child: FlatButton(
              shape: RoundedRectangleBorder(borderRadius: _roundRadius),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      icon,
                      width: Design.px(88),
                      height: Design.px(88),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(vertical: Design.px(20)),
                      child: Text(
                        title,
                        style: styleTitle(),
                      ),
                    )
                  ]),
              onPressed: onPress),
        ),
      ),
    );
  }
}
